<!--
  * 操作记录 详情
  * 
  * @Author:    admin 
  * @Date:      2022-06-02 20:23:08 
    
   
  * @Copyright  jiaoyuyun.org.cn 
-->
<template>
  <a-modal :open="visible" title="提现申请详情" width="60%" :footer="null" @cancel="close">
    <div class="info-box">
      <h4>接单员信息：</h4>
      <a-row class="smart-margin-top10">
        <a-col :span="16">
          <a-row class="detail-info">
            <a-col :span="12" @click="handCopy(detail.name)"> 接单员姓名： {{ detail.name }}</a-col>
            <a-col :span="12"> 接单员接单数量： 
              {{ detail.orderCount}}
            </a-col>
          </a-row>
          <a-row class="detail-info">
            <a-col :span="12"> 订单超时率： {{ detail.timeoutRate }}%</a-col>
            <a-col :span="12"> 提现剩余金额： {{ detail.amount }}元</a-col>
          </a-row>
          <!-- <a-row class="detail-info">
            <a-col :span="12">订单内容：{{ detail.orderContentName }}</a-col>
            <a-col :span="12">订单价格：{{ detail.orderPrice }}元</a-col>
          </a-row>
          <a-row class="detail-info" v-if="detail.orderState==='已完成'">
            <a-col :span="12">完成时间：{{ detail.competeTime }}</a-col>
          </a-row> -->
        </a-col>
        <a-col :span="8">
          <!-- <img src= width="128" height="128" /> -->
          <!-- <a-typography-text class="detail-right" :type="'warning'" v-if="detail.orderStateName!=='已完成'">
            {{ detail.orderStateName }}
          </a-typography-text> -->
          <!-- <a-typography-text class="detail-right" :type="'success'" v-if="detail.orderStateName==='已完成'">
            {{ detail.orderStateName }}
          </a-typography-text> -->
        </a-col>
      </a-row>
    </div>
    <!-- <div class="info-box">
      <h4>用户信息：</h4>
    <a-row class="smart-margin-top10">
      <a-col :span="16">
      <a-row class="detail-info">
          <a-col :span="12" @click="handCopy(detail.userName)"> 用户昵称： {{ detail.userName }}</a-col>
          <a-col :span="12" @click="handCopy(detail.userPhone)"> 联系电话：{{ detail.userPhone }}</a-col>

      </a-row>
      </a-col>
    </a-row>
    </div> -->
    <!-- <div class="info-box" v-if="detail.reMark!==''">
      <h4>备注信息：</h4>
      <a-col :span="24">{{ detail.reMark }}</a-col>
    </div> -->
<!-- 
    <div class="info-box" v-if="detail.jdyId!==null">
      <h4>接单员信息：</h4>
      <a-row class="smart-margin-top10">
        <a-col :span="16">
          <a-row class="detail-info">
            <a-col :span="12" @click="handCopy(detail.jdyName)"> 接单员名称： {{ detail.jdyName }}</a-col>
            <a-col :span="12" @click="handCopy(detail.jdyPhone)"> 联系电话：{{ detail.jdyPhone }}</a-col>
            <a-col :span="12"> 接单时间：{{ detail.jdyTime }}</a-col>
          </a-row>
        </a-col>
      </a-row>
    </div> -->
  </a-modal>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { JsonViewer } from 'vue3-json-viewer';
  import { txApi } from '/@/api/business/tx/tx-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { ORDERS_STATUS_ENUM } from '/@/constants/support/orders-const';
  import { message } from 'ant-design-vue';
  const handCopy = (data) => {
    navigator.clipboard.writeText(data);
    message.success("内容已复制到剪贴板");
  };

  defineExpose({
    show,
  });

  const visible = ref(false);

  function show(userId) {
    visible.value = true;
    clear(detail);
    getDetail(userId);
  }

  const clear = (info) => {
    const keys = Object.keys(info);
    let obj = {};
    keys.forEach((item) => {
      obj[item] = '';
    });
    Object.assign(info, obj);
  };

  function close() {
    visible.value = false;
  }

  let detail = reactive({
    param: '',
    url: '',
  });
  async function getDetail(userId) {
    try {
      SmartLoading.show();
      let res = await txApi.detail(userId);
      detail = Object.assign(detail, res.data);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      SmartLoading.hide();
    }
  }
</script>

<style scoped lang="less">
  .detail-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
  }
  .info-box {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 8px;
  }
  .detail-info {
    .ant-col {
      line-height: 1.46;
      margin-bottom: 12px;
      padding-right: 5px;
    }
  }
  .detail-right-title {
    text-align: right;
    color: grey;
  }

  :deep(.ant-modal-body) {
    padding: 10px !important;
  }

  .detail-right {
    padding-left: 5px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    float: right;
  }
</style>
